<div id="admin-user-list">
  <div class="col-lg-12">
    <!-- START panel-->
    <div class="panel-container">
      <md-toolbar>
        <div class="md-toolbar-tools">
          <h3 translate="ADMIN_USER_PANEL_TITLE"></h3>
          <span flex></span>
          <md-button
            class="md-icon-button"
            aria-label="Create User"
            ng-click="openModal($event)">
            <md-tooltip md-autohide><span translate="ADMIN_USER_CREATE_TOOLTIP"></span></md-tooltip>
              <md-icon class="fa fa-plus-circle" ng-style="{'font-size': '20px'}"></md-icon>
          </md-button>
        </div>
      </md-toolbar>
      <div class="panel-content">
        <!-- START table-responsive-->
        <div class="table-title">
          <md-autocomplete
            class="search-user"
            md-selected-item="autoComplete.selectedItem"
            md-search-text="autoComplete.searchText"
            md-selected-item-change="searchUser(user)"
            md-items="user in users | filter: {name: autoComplete.searchText}"
            md-item-text="user.name"
            md-min-length="0"
            md-floating-label="{{ 'ADMIN_USER_SEARCH_LABEL' | translate }}"
            flex="45">
            <md-item-template>
              <span md-highlight-text="autoComplete.searchText" md-highlight-flags="^i">{{user.name}}</span>
            </md-item-template>
            <md-not-found>
              {{ 'NOT_FOUND_ANY_RESULT' | translate }}
            </md-not-found>
          </md-autocomplete>
        </div>
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th>#</th>
                <th translate="ADMIN_USER_TABLE_HEAD_NAME"></th>
                <th translate="ADMIN_USER_TABLE_HEAD_EMAIL"></th>
                <th translate="ADMIN_USER_TABLE_HEAD_PHONE"></th>
                <th translate="ADMIN_USER_TABLE_HEAD_UNIVERSAL"></th>
                <th translate="ADMIN_USER_TABLE_HEAD_RULE_LEVEL"></th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <md-progress-linear md-mode="indeterminate" ng-if="!users"></md-progress-linear>
              <tr ng-if="!users || !users.length">
                <td colspan="3">
                  {{ 'NOT_FOUND_ANY_RESULT' | translate }}
                </td>
              <tr>
              <tr ng-repeat="user in users">
                <td ng-bind="user.id"></td>
                <td>
                  <a ng-bind="user.name" ui-sref='banshee.admin.user.detail({id: user.id})' class="md-body-2"></a>
                </td>
                <td>
                  <span ng-class="{del: !user.enableEmail}" ng-bind="user.email"></span>
                </td>
                <td>
                  <span ng-class="{del: !user.enablePhone}" ng-bind="user.phone"></span>
                </td>
                <td>
                  <span ng-if="user.universal">{{ 'YES' | translate }}</span>
                  <span ng-if="!user.universal">{{ 'NO' | translate }}</span>
                </td>
                <td>
                  <span ng-if="user.ruleLevel==0">{{ 'ADMIN_USER_RULE_LEVEL_LOW' | translate }}</span>
                  <span ng-if="user.ruleLevel==1">{{ 'ADMIN_USER_RULE_LEVEL_MIDDLE' | translate }}</span>
                  <span ng-if="user.ruleLevel==2">{{ 'ADMIN_USER_RULE_LEVEL_HIGH' | translate }}</span>
                </td>
                <td style="text-align: right;">
                  <md-button class="md-raised md-primary md-mini"  ui-sref='banshee.admin.user.detail({id: user.id})' aria-label="edit user">
                    <i class="fa fa-pencil"></i>
                  </md-button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- END table-responsive-->
      </div>
    </div>
    <!-- END panel-->
  </div>
</div>
